<template>
  <div>
    <div class="flex-start m-b-30">
      <el-button icon="el-icon-back" type="primary" plain round size="small" @click="back">返回</el-button>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>工单号</template>
        <template #value>{{ detail.orderNo }}</template>
      </key-value>
      <key-value>
        <template #key>完成时间</template>
        <template #value>{{ detail.completeTime | defaultValue }}</template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>预计补液总量（吨）</template>
        <template #value>{{ detail.expectCapacity | kg2Tons }}</template>
      </key-value>
      <key-value>
        <template #key>实际采购量（吨）</template>
        <template #value>{{ detail.actualProcureCapacity | kg2Tons }}</template>
      </key-value>
      <key-value>
        <template #key>实际补液量（吨）</template>
        <template #value>{{ detail.actualCapacity | kg2Tons }}</template>
      </key-value>
    </div>
    <div class="flex-start">
      <key-value>
        <template #key>补液车辆</template>
        <template #value>{{ detail.carNo | defaultValue }}</template>
      </key-value>
      <key-value>
        <template #key>司机姓名</template>
        <template #value>{{ detail.userName | defaultValue }}</template>
      </key-value>
      <key-value>
        <template #key>司机电话</template>
        <template #value>{{ detail.userPhone | defaultValue }}</template>
      </key-value>
    </div>
    <el-table class="my-table m-t-20" :data="data" v-loading="loading" style="width: 100%" border
              :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column prop="macCode" label="加注机编号" width="180"/>
      <el-table-column label="加注站名称" min-width="180">
        <template v-slot="scope">{{ scope.row.siteName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="总容量（吨）" width="170">
        <template v-slot="scope">{{ scope.row.totalCapacity | kg2Tons }}</template>
      </el-table-column>
      <el-table-column label="预计补液总量（吨）" width="170">
        <template v-slot="scope">{{ scope.row.expectCapacity | kg2Tons }}</template>
      </el-table-column>
      <el-table-column label="实际补液量（吨）" width="160">
        <template v-slot="scope">{{ scope.row.actualCapacity | kg2Tons }}</template>
      </el-table-column>
      <el-table-column prop="completeTime" label="完成时间" width="180"/>
      <el-table-column label="任务状态" width="100">
        <template v-slot="scope">{{ scope.row.orderStatus | status }}</template>
      </el-table-column>
    </el-table>
    <app-pagination ref="paginationRef" :total="total" class="m-t-20" @do-query="query"/>
    <div class="h-100px"></div>
  </div>
</template>

<script>
import RehydrationTicketStatusSelect from "@/components/business/rehydration-ticket-status-select";
import AppPagination from "@/components/business/app-pagination";
import {getRecords, getTotal, isNull} from "@/util/common-util";
import KeyValue from "@/components/basic-block/key-value";
import {detailPage} from "@/api/business/filling-storage-order";

export default {
  name: "rehydration-ticket-detail",
  components: {KeyValue, AppPagination, RehydrationTicketStatusSelect},
  props: ['detail'],
  data() {
    return {
      data: [],
      loading: false,
      total: 0,
      search: {
        orderId: ''
      }
    }
  },
  filters: {
    status(v) {
      // '工单状态(0-待派发 1-进行中 2-已完成 3-已取消)',
      if (v === 0) return "待派发"
      if (v === 1) return "进行中"
      if (v === 2) return "已完成"
      if (v === 3) return "已取消"
      return "未知"
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage()
      }
      this.loading = true
      this.search.orderId = this.detail.id
      detailPage(_page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    back() {
      this.$emit('back')
    },
  }
}
</script>


<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
